<template>
  <div class="wh-full flex flex-col flex-1">
    <div class="cus-scroll-y page-top position-relative bg-white">
      <el-backtop target=".cus-scroll-y" :right="50" :bottom="100" />
      <div class="ab-btn top-10px right-10px absolute z-100">
        <slot name="abBtn"></slot>
      </div>
      <slot name="top" />
    </div>
    <!-- <div
      class="page-bottom flex items-center justify-center border-t bg-white bc-eee"
    >
      <slot name="bottom"></slot>
    </div> -->
    <slot name="dialog"></slot>
  </div>
</template>

<script setup>
defineProps({
  showFooter: {
    type: Boolean,
    default: false
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: undefined
  }
})
</script>
<style lang="scss" scoped>
:deep(.n-card__content) {
  display: flex;
  flex-direction: column;
}
.page-top {
  // background-color: #fff;
  padding: 10px;
  flex: 1;
}
.page-bottom {
  // background-color: #fff;
  // border-top: 1px solid #ebeef5;
  border-top-width: 1px;
  border-top-style: solid;
  padding: 10px 0;
  height: 48px;
  box-sizing: border-box;
}
</style>
